<template>
  <a-modal
    :title="title"
    width="80%"
    :dialog-style="{ top: '20px' }"
    :visible="visible"
    @ok="handleSubmit"
    @cancel="close"
  >
    <!-- 查询区域-start -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="refreshTable">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="商品内容">
              <s-input placeholder="商品编号/名称" v-model="queryParam.name" />
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="加入时间">
              <a-range-picker v-model="queryParam.crtDtRange" />
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="refreshTable" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-end -->

    <div>
      <s-table
        ref="table"
        rowKey="id"
        :customRow="onClickRow"
        :rowSelection="rowSelection"
        :columns="columns"
        :data="loadData"
      >
        <span slot="issueStatus" slot-scope="text, record">
          <a-switch :checked="text === issueStatusEnum.RELEASE.KEY" @click="switchIssuStatus(record)" disabled />
        </span>
      </s-table>
    </div>
  </a-modal>
</template>
<script>
import { ListMixin } from '@/mixins/ListMixin'
import { apiQueryCommodityList } from '@/api/commodity'
import { COMMODITY_ISSUE_STATUS_ENUM } from '@/store/mutation-types'

const columns = [
  {
    title: '商品编号',
    dataIndex: 'serialNo',
    key: 'serialNo'
  },
  {
    title: '商品名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '价格/运费',
    dataIndex: 'price',
    key: 'price'
  },
  {
    title: '是否上架',
    dataIndex: 'issueStatus',
    key: 'issueStatus',
    scopedSlots: { customRender: 'issueStatus' }
  },
  {
    title: '库存',
    dataIndex: 'quantity',
    key: 'quantity'
  },
  {
    title: '加入时间',
    dataIndex: 'crtDt',
    key: 'crtDt',
    width: 180
  }
]

export default {
  name: 'CommodityListModal',
  mixins: [ListMixin],
  computed: {
    rowSelection () {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        type: 'radio',
        onChange: this.onSelectChange,
        onSelect: this.onSelect
      }
    }
  },
  data () {
    return {
      visible: false,
      title: '',
      issueStatusEnum: COMMODITY_ISSUE_STATUS_ENUM,
      columns,
      loadData: parameter => {
        return apiQueryCommodityList(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      }
    }
  },
  methods: {
    show (title) {
      this.visible = true
      this.title = title
    },
    close () {
      this.visible = false
    },
    onClickRow (record) {
      return {
        on: {
          click: () => {
            const keys = []
            keys.push(record.id)
            this.selectedRowKeys = keys
            const rows = []
            rows.push(record)
            this.selectionRows = rows
          }
        }
      }
    },
    onSelectChange (selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
      console.log(this.selectionRows)
    },
    handleSubmit () {
      console.log(this.selectionRows[0])
      if (this.selectedRowKeys.length === 0) {
        this.$message.warn('请选择试商品！')
        return
      }
      this.$emit('setCommodityId', this.selectionRows[0])
      this.close()
    }
  }
}

</script>
